/*
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

@import '../../assets/styles/base/_colors.scss';
@import '../../assets/styles/base/_variables.scss';

app-editor {
  display: flex;
  width: 100%;

  .side-bar {
    display: flex;

    .error_dot {
      align-self: center;
    }

    .files {
      & > * {
        padding: $space-medium $space-large;
      }

      flex: 1;
      display: flex;
      flex-direction: column;
      overflow-y: auto;

      .side-bar-nav {
        padding: 0;
        max-height: 60vh;
        overflow-y: auto;
        min-height: 90px;
        .error {
            color: $first-warning;
        }

        ul li div {
          padding: 0;
        }
      }
    }

    .actions {
      background-color: $third-highlight;
      border-top: 1px solid $fourth-highlight;
      padding: $space-small $space-large $space-small $space-large;

      display: flex;
      flex-direction: row;
      justify-content: flex-start;

      .add-file, .download-action {
        flex: 1;
      }
    }

    .deploy {
      background-color: $third-highlight;
      border-top: 1px solid $fourth-highlight;
      padding: 0 $space-large $space-large $space-large;

      h2 {
        margin-bottom: $space-medium;
      }

      .busnet-version {
        min-height: 2.2rem;
        display: flex;
        flex-direction: row;

        .poc {
          margin: 0;
        }

        .semver-label, .semver-value, .semver {
          display: block;
          line-height: 2rem;
          font-size: 0.8rem;
        }

        .semver-label {
          flex: 1;
          font-weight: 700;
          font-size: 0.8rem;
          color: #8C9696;
        }

        .semver-value {
          flex: 4;
          display: flex;
          flex-direction: row;
          min-width: 0;

          .semver {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            font-style: italic;

            svg.error-dot {
              width: 12px;
              height: 12px;
            }
          }
        }

        button {
          margin-left: $space-smedium;
          vertical-align: top;
          line-height: 2rem;
          font-size: 0.8rem;
        }

        input[type=text] {
          margin: 0;
          background-color: white;
          font-size: 0.8rem;
          line-height: unset;
          height: 1.8rem;
        }

      }

      .error {
        color: $first-warning;
      }
    }
  }

  svg.nav-icon {
      width: 32px;
      height: 16px;
  }

  .main-view {
    display: flex;
    flex-direction: column;
    .business-network-details {
      display: flex;
      height:50px;
      margin-bottom: 0rem;

      .business-network-description {
        margin-right: $space-smedium;
        max-width: 20rem;
        color: $secondary-text;
        position: relative;
        p {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
      }

      .business-network-description .tooltiptext {
        top : 2.5rem;
      }

      .business-network-description:hover .tooltiptext {
        visibility: visible;
      }

      .file-name {
        margin-right: $space-smedium;
        margin-bottom: 0.3rem;
        color: $secondary-text;
      }

      .edit-package-text {
        font-style: italic;
      }

      .edit-label{
        line-height: 1.8rem;
        font-weight:bold;
        flex:0 0 auto;
      }

      .edit-file-hidden{
        margin-top: 0.25rem;
        line-height: 1.7rem;
        color: $secondary-text;
        flex-shrink:1;
      }

      .edit-file-label{
        margin-top: 0.3rem;
        line-height: 1.8rem;
        font-weight: bold;
        color: $primary-text;
        flex-shrink: 1;
        margin-right: 1rem;
        font-size:14px;
      }

      .edit-file-row{
        flex:2;
        display:flex;

        .edit-file-value{
            flex-basis:50%;
            display:flex;
            flex-direction: column;

            input {
              height: 1.8rem;
            }
        }
      }

      .error-message {
        margin-top: -1rem;
      }
    }

    .readme {
      background-color: $white;
      padding: $space-large;
      min-height: 72vh;
      max-height: 72vh;
      overflow-y: auto;

      pre {
        font-size: 0.8rem;
        color: $white;
        background-color: #272B36;
        code {
          background-color: transparent;
          border: none;
          font-size: 0.7rem;
        }
      }

      code {
        border: 1px solid $keyline-highlight;
        background-color: $white;
        border-radius: 2px;
        padding-right: 5px;
        padding-left: 5px;
        padding-top: 1px;
        padding-bottom: 1px;
      }
    }

    .edit_icon {
        flex-shrink: 1;
        align-self: center;
        padding-top:4px;
    }

    .delete_icon {
        flex-shrink: 1;
        align-self: center;
        margin-left: auto;
        padding-top:4px;
    }

    .readme_icon_preview .readme_icon_edit .readme_icon_settings {
      flex-shrink: 1;
      padding-top:4px;
      padding-right: 10px;
    }

    .readme_icon_preview {
      margin-left: auto;
    }
  }

  .CodeMirror {
    font-family: Source Code Pro;
  }

  .ps.ps--active-x>.ps__scrollbar-x-rail,
  .ps.ps--active-y>.ps__scrollbar-y-rail{
      opacity: 0.6;
  }

}
